import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Modal, Toast, Checkbox } from 'antd-mobile';

const alert = Modal.alert;
const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;

export class Car extends Component {
    // 展示弹框
    showAlert = (item, index) => {
        // 判断当前项是否为一
        if (item.count === 1) {
            alert('Delete', 'Are you sure???', [
                { text: 'Cancel', onPress: () => Toast.info('取消删除'), style: 'default' },
                {
                    text: 'OK', onPress: () => {
                        this.props.removeItem(index)
                        Toast.success('删除成功')
                    }
                },
            ])
        } else {
            this.props.delItem(item)
        }
    }
    state = {
        flag: true
    }
    render() {
        // console.log(this.props)
        const { carList, addItem, allPrice, changeChecked, allChecked } = this.props
        const { flag } = this.state
        return (
            <div>
                {
                    carList.map((item, index) => {
                        return <li className="oli" key={index}>
                            <div className="left">
                                <CheckboxItem checked={item.flag} onChange={(ev) => {
                                    changeChecked(index)
                                }} />
                                <img src={item.img} alt="" />
                            </div>
                            <div className="right">
                                <h3>
                                    {item.title}
                                </h3>
                                <h4 style={{
                                    marginTop: 20
                                }}>
                                    {item.price}
                                </h4>
                                <h2 style={{
                                    marginTop: 20,
                                    color: "orange"
                                }}>
                                    <button onClick={() => {
                                        this.showAlert(item, index)
                                    }}>--</button>
                                    {item.count}
                                    <button onClick={() => {
                                        addItem(item)
                                    }}>+</button>
                                </h2>
                            </div>
                        </li>
                    })
                }

                {
                    carList.length > 0 ? <div>
                        <div>
                            总价格：{allPrice}
                        </div>
                        <div>
                            全选  <CheckboxItem checked={flag} onChange={(ev) => {
                                this.setState({
                                    flag: ev.target.checked
                                }, () => {
                                    allChecked(this.state.flag)
                                })
                            }} />
                        </div>
                    </div> : <></>
                }
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    carList: state.carList,
    allPrice: state.allPrice
})

const mapDispatchToProps = (dispatch) => {
    return {
        addItem(item) {
            dispatch({ type: "ADD_ITEM", item })
        },
        delItem(item) {
            dispatch({ type: "DEL_ITEM", item })
        },
        // 删除
        removeItem(index) {
            dispatch({ type: "REMOVE_ITEM", index })
        },
        // 修改选中状态
        changeChecked(index) {
            dispatch({ type: "CHANGE_CHECK", index })
        },
        // 全选
        allChecked(flag) {
            dispatch({ type: "ALL_CHECK", flag })
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Car)
